import Home from './home/Home';
import Follow from './Follow/Follow';
import Topic from './Topic/Topic';
import Interaction from './Interaction/Interaction';
import Mine from './Mine/Mine';
import NextPage from './home/NextPage';
import Weathers from './home/Weathers';

import AreaWeathers from './home/AreaWeathers';

import GhostStoriesPage from './Follow/GhostStoriesPage';


import React from 'react';
import {Image} from 'react-native';
import { createStackNavigator, createBottomTabNavigator,createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

const TabContainer = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarPosition: 'bottom',
        tabBarLabel: '首页',
        showLabel: false,
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'ios-add' : 'ios-add-circle'}
            size={26}
            style={{ color: tintColor }}
          />
        ),
      }
    },
    Follow: {
      screen: Follow,
      navigationOptions: {
        tabBarPosition: 'bottom',
        tabBarLabel: '星',
        showLabel: false,
        tabBarIcon: ({ tintColor, focused }) => {
          return focused?<Image style={{width:30,height:30}} source={require('./Follow/Tab/tab_xing_h.png')}/>:
          <Image style={{width:30,height:30}} source={require('./Follow/Tab/tab_xing.png')}/>
        },
      }
    },
    Topic: {
      screen: Topic,
      navigationOptions: {
        tabBarPosition: 'bottom',
        tabBarLabel: '主题',
        showLabel: false,
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'ios-add' : 'ios-add-circle'}
            size={26}
            style={{ color: tintColor }}
          />
        ),
      }
    },
    Interaction: {
      screen: Interaction,
      navigationOptions: {
        tabBarPosition: 'bottom',
        tabBarLabel: '相关',
        showLabel: false,
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'ios-add' : 'ios-add-circle'}
            size={26}
            style={{ color: tintColor }}
          />
        ),
      }
    },
    Mine: {
      screen: Mine,
      navigationOptions: {
        tabBarPosition: 'bottom',
        tabBarLabel: '我的',
        showLabel: false,
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'ios-add' : 'ios-add-circle'}
            size={26}
            style={{ color: tintColor }}
          />
        ),
      }
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#3e9ce9',
      inactiveTintColor: '#999999',
      showIcon: true,
      style: {
        backgroundColor: '#fff'
      },
      indicatorStyle: {
        opacity: 0
      },
      tabStyle: {
        padding: 0
      }
    }
  }
);
//解决TabBar这一层无法设置navigationOptions的问题。
TabContainer.navigationOptions = ({ navigation }) => {
  let params = {selectItem:{ 'type': 'dp', 'text': '短篇' }}
  navigation.state.params = params;
  const component = TabContainer.router.getComponentForState(navigation.state);
  if (typeof component.navigationOptions === 'function') {
    return component.navigationOptions({ navigation });
  }

  return component.navigationOptions;
};
export const AuthLoadingRouter = createAppContainer(
  createStackNavigator(
    {

      Index: {
        screen: TabContainer,
      },
      NextPage:{
        screen:NextPage
      },
      Weathers:{
        screen:Weathers
      },
      AreaWeathers:{
        screen:AreaWeathers
      },
      GhostStoriesPage:{
        screen:GhostStoriesPage
      }
    },
    {
      initialRouteName: 'Index',
      mode: 'card',
      navigationOptions: ({ navigation }) => ({
        // header:navigation.params.visiable?navigation.params.component:null,
        header: null,
      }),
    }
  )
);

export default AuthLoadingRouter;